<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>当前n的值是: {{n}}</h2>
        <button @click="add">点我n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
 
    <script>
        Vue.config.productionTip = false
        let vm = new Vue({
            el: "#root",
            //如果root容器中不写任何标签，则可以通过template属性指定容器的html内容
            // template: `<div>
            //     <h2>当前n的值是: {{n}}</h2>
            //     <button @click="add">点我n+1</button>
            //     </div>
            // `, 
            data: {
                n: 1,
            },
            methods: {
                add(){
                    this.n++
                },
                bye(){
                    console.log('bye~')
                    //调用$destroy方法，会进行vue的销毁流程
                    this.$destroy()
                }
            },
            watch: {
                n(oldVal, newVal) {
                    console.log('n变了')
                }
            },
            //以下为初始化的生命周期函数
            beforeCreate() {
                console.log('beforeCreate')
                //1. 此时还未数据代理和监测，无法通过vm获取_data和data中的属性
                console.log(this, this._data, this.n) //vm undefined undefined
                console.log('\n\n')
                //debugger;
            },
            created() {
                console.log('created')
                //2. 此时完成数据代理，数据监测，可通过vm获取_data和data中的属性，还没有进行模板解析
                console.log(this, this._data, this.n) //vm obs 1
                console.log('\n\n')
            },
            beforeMount() {
                console.log('beforeMount')
                //3. 此时vm完成模板解析，生成虚拟DOM（放到内存中），页面上的模板还没有经过编译，即页面显示的是{{xxx}}等内容
                let h2 = document.querySelector('h2').innerText
                console.log(h2) //当前n的值是: {{n}}
                //此时对document操作，最终都是无效的
                document.querySelector('h2').innerText = '哈哈'
                console.log('\n\n')
            },
            mounted() {
                console.log('mounted')
                //此时页面中都是被vue编译替换过的DOM;至此vue初始化完成
                let h2 = document.querySelector('h2').innerText
                console.log(h2) //当前n的值是: 1
                console.log('\n\n')
                //此时操作dom是有效的，但是不推荐
                // document.querySelector('h2').innerText = '哈哈'
            },
            //以下为更新数据的生命周期函数
            beforeUpdate() {
                console.log('beforeCreate')
                //当data的数据更新时，vue调用beforeCreate，此时数据已更新，但页面还未更新
                console.log(this.n) //2
                let h2 = document.querySelector('h2').innerText
                console.log(h2) //当前n的值是: 1
                console.log('\n\n')
            },
            updated() {
                console.log('updated')
                //当data的数据更新后，vue调用updated，此时数据和页面都已更新且同步
                console.log(this.n) //2
                let h2 = document.querySelector('h2').innerText
                console.log(h2) //当前n的值是: 2
                console.log('\n\n')
            },
            //以下为销毁vue实例的生命周期函数
            beforeDestroy() {
                //vm销毁之前调用，此时vm管理的data、methods、指令等还处于可用状态，一般在这个函数做回收资源、取消定时器等收尾操作
                console.log('beforeDestroy')
                console.log(this.n) //可拿到n
                this.n++ //此时对数据的所有操作都不触发页面更新
                console.log('\n\n')
            },
            destroyed() {
                //vm销毁后调用，此时vm管理的data、methods、指令等都不可用，一般很少用这个函数，react里没有这个钩子
                console.log('destroyed')
                console.log('\n\n')
            },
        })
    </script>
</body>
</html>